<%@ page import="eudjok.Musica" %>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="layout" content="main" />
        <g:set var="entityName" value="${message(code: 'musica.label', default: 'Musica')}" />
        <title><g:message code="Veja o top das músicas mais avaliadas do dia" args="[entityName]" /></title>
	<script>
		function AbreAba(nome_div)
		{
			var total_divs = document.getElementsByTagName('div').length;
			var div = "";
			var td = "";

			for (var i=1; i < total_divs+1; i++)
			{
				div = "div"+i;
				td = "td"+i;
				document.getElementById(div).style.display = "none"; 
				document.getElementById(td).style.backgroundColor = "";
				document.getElementById(div).className="div"; 

				if (div == nome_div)
				{
					document.getElementById(nome_div).style.display = "block"; 
					document.getElementById(td).style.backgroundColor = "#CCCCCC";
				}
				
			}
        }
</script>	
    </head>
    <body>
       <div id="navegacao">
           	 	<div class="homePagePanel">
           	     	<div class="panelTop"></div>
           	     	<div class="panelBody" id="panelBody">
           	        	 <g:render template="/common/perfil/Dj" />
           	     	</div>
           	    	 <div class="panelBtm"></div>
           		 </div>
        	</div>
			
				
		<div id="centroLivre">
			<h2 class="pretoPrincipal">Top Musicas</h2>
			
			<p class="nav">
				Confira aqui as melhores musicas do euDj
			</p>
			<table width="400" cellspacing="0">
			<tr>
				<br>
					<td id="td1"><a href="#" onclick="AbreAba('div1')">Melhores do Dia</a></td>
					<td id="td2"><a href="#" onclick="AbreAba('div2')">Mais Avaliadas</a></td>
					<td id="td3"><a href="#" onclick="AbreAba('div3')">Mais Acessadas</a></td>
					<td id="td4"><a href="#" onclick="AbreAba('div4')">Mais Indicadas</a></td>
				
				</tr>
			</table>
			
			<div id="div1" style="display:block">
            <h1><g:message code="Melhores do Dia" args="[entityName]" /></h1>
            <g:if test="${flash.message}">
            <div class="message">${flash.message}</div>
            </g:if>
            <div class="top">
				<table width="400" cellspacing="0">
			<tr>
				<br>
					<td id="td5"><a href="#" onclick="AbreAba('div5')">Mensal</a></td>
					<td id="td6"><a href="#" onclick="AbreAba('div6')">Anual</a></td>
				
				</tr>
			</table>	
			
			  <br />
                <table>
                    <thead>
                        <tr>
														
                            <g:sortableColumn property="titulo" title="${message(code: 'musica.titulo.label', default: 'Titulo')}" />
							
							<g:sortableColumn property="avaliacaoPositiva" title="${message(code: 'musica.avaliacao_positiva.label', default: 'Avalia&ccedil;&otilde;es')}" />
							
                        </tr>
                    </thead>
                    <tbody>
                    <g:each in="${musicaInstanceListDia}" status="i" var="musicaInstance">
                        <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
                        
                          <!--<td><g:link action="show" id="${musicaInstance.id}">${fieldValue(bean: musicaInstance, field: "id")}</g:link></td>-->
                        
							<td>${i+1}º. ${fieldValue(bean: musicaInstance, field: "titulo")}</td>
							
							<td>${fieldValue(bean: musicaInstance, field: "avaliacaoPositiva")}</td>
                        
                        </tr>
                    </g:each>
                    </tbody>
                </table>
			 </div>	
            </div>

			<div id="div2" style="display:none">
			<h1><g:message code="Mais Avaliadas" args="[entityName]" /></h1>
			<table>
                    <thead>
                        <tr>
                        
                            <g:sortableColumn property="titulo" title="${message(code: 'musica.titulo.label', default: 'Titulo')}" />
							
							<g:sortableColumn property="avaliacaoPositiva" title="${message(code: 'musica.avaliacao_positiva.label', default: 'Melhores Avaliadas')}" />
							
                        </tr>
                    </thead>
                    <tbody>
                    <g:each in="${musicaInstanceListAvaliadas}" status="i" var="musicaInstance">
                        <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
                        
                          <!--<td><g:link action="show" id="${musicaInstance.id}">${fieldValue(bean: musicaInstance, field: "id")}</g:link></td>-->
                        
                            
                        
                            <td>${i+1}º. ${fieldValue(bean: musicaInstance, field: "titulo")}</td>
							
							<td>${fieldValue(bean: musicaInstance, field: "avaliacaoPositiva")}</td>
                        
                        </tr>
                    </g:each>
                    </tbody>
                 </table>
				</div>
				
			<div id="div3" style="display:none">
				<h1><g:message code="Mais acessadas" args="[entityName]" /></h1>
            <g:if test="${flash.message}">
            <div class="message">${flash.message}</div>
            </g:if>
            <div class="top">
                <table>
                    <thead>
                        <tr>
                        
                            <g:sortableColumn property="titulo" title="${message(code: 'musica.titulo.label', default: 'Titulo')}" />
							
							<g:sortableColumn property="acessadas" title="${message(code: 'musica.visitas.label', default: 'Acessadas')}" />
                        
                        </tr>
                    </thead>
                    <tbody>
                    <g:each in="${musicaInstanceListAcessadas}" status="i" var="musicaInstance">
                        <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
                        
                          <!-- <td><g:link action="show" id="${musicaInstance.id}">${fieldValue(bean: musicaInstance, field: "id")}</g:link></td> -->
                        
                            
                        
                            <td>${i+1}º. ${fieldValue(bean: musicaInstance, field: "titulo")}</td>
							
							<td>${fieldValue(bean: musicaInstance, field: "visitas")}</td>
                        
                        </tr>
                    </g:each>
                    </tbody>
                </table>
				</div>
				
			</div>
			
			<div id="div4"	 style="display:none">
			<h1><g:message code="Mais Indicadas" args="[entityName]" /></h1>
            <g:if test="${flash.message}">
            <div class="message">${flash.message}</div>
            </g:if>
            <div class="top">
                <table>
                    <thead>
                        <tr>
                        
                            <g:sortableColumn property="titulo" title="${message(code: 'musica.titulo.label', default: 'Titulo')}" />
							
							<g:sortableColumn property="indicacoes" title="${message(code: 'musica.indicacoes.label', default: 'Indicadas')}" />
                        
                        </tr>
                    </thead>
                    <tbody>
                    <g:each in="${musicaInstanceListIndicadas}" status="i" var="musicaInstance">
                        <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
                        
                          <!-- <td><g:link action="show" id="${musicaInstance.id}">${fieldValue(bean: musicaInstance, field: "id")}</g:link></td> -->
                        
                            
                        
                            <td>${i+1}º. ${fieldValue(bean: musicaInstance, field: "titulo")}</td>
							
							<td>${fieldValue(bean: musicaInstance, field: "indicacoes")}</td>
                        
                        </tr>
                    </g:each>
                    </tbody>
                </table>
			 </div>
			</div>
			<br /><br />
			 <div id="div5" style="display:none">
			 <br /><br />
			 <table width="400" cellspacing="0">
			<tr>
				<br>
					<td id="td5"><a href="#" onclick="AbreAba('div5')">Mensal</a></td>
					<td id="td6"><a href="#" onclick="AbreAba('div6')">Anual</a></td>
				
				</tr>
			</table>	
			<br /><br />
			<g:if test="${flash.message}">
			<h1><g:message code="Melhores do Mês" args="[entityName]" /></h1>
            <div class="message">${flash.message}</div>
            </g:if>
            <div class="top">
                <table>
                    <thead>
                        <tr>
                        
                            <g:sortableColumn property="titulo" title="${message(code: 'musica.titulo.label', default: 'Titulo')}" />
							
							<g:sortableColumn property="mes" title="${message(code: 'musica.mes.label', default: 'Melhores do Mês')}" />
                        
                        </tr>
                    </thead>
                    <tbody>
                    <g:each in="${musicaInstanceListMensal}" status="i" var="musicaInstance">
                        <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
                        
                         <!-- <td><g:link action="show" id="${musicaInstance.id}">${fieldValue(bean: musicaInstance, field: "id")}</g:link></td> -->
                        
                            
                        
                            <td>${i+1}º. ${fieldValue(bean: musicaInstance, field: "titulo")}</td>
							
							<td>${fieldValue(bean: musicaInstance, field: "mes")}</td>
                        
                        </tr>
                    </g:each>
                    </tbody>
                </table>
			 </div>				
			</div>
			 <br /><br /> 
			<div id="div6" style="display:none">
			 <table width="400" cellspacing="0">
			<tr>
				<br>
					<td id="td5"><a href="#" onclick="AbreAba('div5')">Mensal</a></td>
					<td id="td6"><a href="#" onclick="AbreAba('div6')">Anual</a></td>
				
				</tr>
			</table>
			<br /><br /> 			
			<g:if test="${flash.message}">
			<h1><g:message code="Melhores do Ano" args="[entityName]" /></h1>
            <div class="message">${flash.message}</div>
            </g:if>
            <div class="top">
                <table>
                    <thead>
                        <tr>
                        
                            <g:sortableColumn property="titulo" title="${message(code: 'musica.titulo.label', default: 'Titulo')}" />
							
							<g:sortableColumn property="ano" title="${message(code: 'musica.ano.label', default: 'Melhores Anual')}" />
                        
                        </tr>
                    </thead>
                    <tbody>
                    <g:each in="${musicaInstanceListAnual}" status="i" var="musicaInstance">
                        <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
                        
                          <!-- <td><g:link action="show" id="${musicaInstance.id}">${fieldValue(bean: musicaInstance, field: "id")}</g:link></td> -->
                        
                            
                        
                            <td>${i+1}º. ${fieldValue(bean: musicaInstance, field: "titulo")}</td>
							
							<td>${fieldValue(bean: musicaInstance, field: "ano")}</td>
                        
                        </tr>
                    </g:each>
                    </tbody>
                </table>
			 </div>
				
			  </div>
            
        </div>
       </div>
    </body>
</html>